Ext.require(['*']);
Ext.onReady(function(){
	
	Ext.QuickTips.init();
	
	var mtHeight;
		//框架顶部
		var head = new Ext.panel.Panel({
						height:60,
			      		//border:false,
						split: true,
						animCollapse: true,
			      		region:"north",
			      		
			     		html : '<div style="background:url(resources/images/main1.gif) repeat-x; height:60px;"></div>'
					});
		//框架底部 
		var foot = new Ext.panel.Panel({
					  height:30,
				      border:false,
				      region:"south",
				      html : '<div style="background:url(resources/images/main2.gif) repeat-x; height:33px; ">'
									+ '<div style="float:left;font:normal 12px tahoma, arial, sans-serif, 宋体;margin:10px 0 0 10px;">'
									+ 'Power By:	<span style="color:blue">常纪文</span> &nbsp;</div>'
									+ '<div	style="float:right;margin:10px;font:normal 12px tahoma, arial, sans-serif, 宋体;" >'
									+ '版权所有：<a href="http://www.morik.com">www.kilowen.cn</a></div>'
									+ '</div>'
					});
		//左侧树菜单 
		var treeStore = Ext.create('Ext.data.TreeStore', {
    		root: {
    			    text: "root",
    			    url:"234",
		        	expanded: true, 
		        	children: [{ text: "homework",
		        				 id:"123",
            					 expanded: true,
            					 url:"",
            					 children: [{id:"baidu",text: "baidu", leaf: true,url:"http://www.baidu.com"},
                			                {id:"iteye",text: "iteye", leaf: true,url:"http://iteye.com"},
                			                {id:"test",text: "user", leaf: true,url:"user?number="+Math.random()}
            	                           ]
		            	        },
         		 				{ text: "buy lottery tickets", leaf: true }
        					   ]
                 }
		}); 
		//var tab;
		var treePanel = Ext.create('Ext.tree.Panel', {
		    title: '子元素1',
		    width: 200,
		    store: treeStore,
		    rootVisible: false,
		    listeners : {
		    	'itemclick':function(view,record,item,index,e){
		    		e.stopEvent();
		    		//alert("record.url:" + record.raw.url);
		    		var id = record.get('id');
		    		//alert("id: " +id);
		    		var leaf = record.get('leaf');
		    		if(id!=0&&leaf){
		    			id = 'kilo-'+id;
		    			//alert(id);
		    			//tab= Ext.getCmp(id);
		    			var tab = mainTab.getComponent(id);
		    			//alert(tab);
					    if(!tab){
					    	//alert(id);
					    	/*var linkurl = record.raw.url;
					    	if(linkurl.indexOf("http")== -1){
					    		linkurl = "WEB-INF/views/" + linkurl;
					    	}*/
					    	mtHeight = mainTab.getHeight() - mainTab.tabBar.getHeight();
                            tab = mainTab.add({
	                            id : id,
	                            border:false,
	                            xtype:'panel',
	                            layout:'border',
	                            title : record.get('text'),
	                            height:mtHeight,
	                            //margins: '5 5 5 5',
	                            closable : true,
	                            //autoScroll:true,
	                            html:'<iframe frameborder=0 width=100% height=100% src= ' +  record.raw.url + ' />'//以iframe的形式
	                            /*loader : {
			                            	url: record.raw.url,
			                                scripts: true,
			                                autoLoad: true,
			                               
	                            		 }*/
	                     });
                            //tab= Ext.getCmp(id);
                            /*alert(mainTab.getHeight());
                            alert(mainTab.tabBar.getHeight());*/
                            tab.setHeight(mtHeight);   //解决高度自适应问题，搞得很痛苦啊 
                            //alert(tab);
                            mainTab.setActiveTab(tab);
                            mainTab.doLayout();
				        }else{
				        	mainTab.setActiveTab(tab);
				        	tab.loader.load();//不刷新
				        	mainTab.loader.load();
				        }
						
			            //mainTab.doLayout();
		    		}	    		
		    	}
		    }
		});
		
		var leftMemu = new Ext.panel.Panel({
			  region:"west",
			  id: 'west-panel',
			  title:"菜单",
			  split: true,
		      width:200,
		      minWidth: 175,
              maxWidth: 400,
              collapsible:true,
		      animCollapse: true,
              margins: '0 0 0 5',
		      layout:"accordion",  
		      items:[ treePanel,  
		              {title:"子元素2",html:"这是子元素2中的内容"},  
		              {title:"子元素3",html:"这是子元素3中的内容"},  
		              {title:"子元素4",html:"这是子元素4中的内容"} 
		            ] 
			});
			
		//主面板 
			var mainTab = new Ext.tab.Panel({
			 id:'mainTab',
			 region:"center",
			 deferredRender: false,
			 layoutOnTabChange : true,
			 split: true,
			 activeTab: 0,     // first tab initially active
			 //plain: true,                        //True表示tab候选栏上没有背景图片（默认为false）
			 enableTabScroll: true,              //选项卡过多时，允许滚动
			 //border:false,
			 //layout:'fit',
		 	 frame:false,
             //autoScroll: true,
             //bodyPadding: 5,
             //align: 'stretch',
		     viewConfig:{
		            loadMask:true
		             },
             items:[{     
	                 title: '欢迎页面',
	                 html:'Hello World !'
              }]
			});
		//整个框架视图 
		new Ext.container.Viewport({
			 border:false,
		     layout:"border",
		     items:[head, foot, leftMemu, mainTab]
    });
});